<template>
	<div class="todo-info">
		<component
			:is="formSlot"
			showCancel
			confirmText="通过"
			cancelText="不通过"
			@onCancel="visible = true"
			@onSubmit="onSubmit"
		>
			<h3 class="h3-before">{{ detail?.checkName }}</h3>
			<div class="data">
				<div class="text">
					<p>是否存在隐患：</p>
					<p>{{ detail?.isHaveYh || '-' }}</p>
				</div>
				<div class="text">
					<p>隐患描述：</p>
					<p>{{ detail?.checkSm || '-' }}</p>
				</div>
				<div class="images">
					<van-image
						v-for="(image, index) in detail?.checkZp?.split('|')"
						:key="index"
						:src="image"
						@click="onPreview(detail?.checkZp?.split('|'), index)"
					/>
				</div>
				<div class="text">
					<p>整改情况：</p>
					<p>{{ zgEunm[detail?.zgValue] || '-' }}</p>
				</div>
				<div class="text" v-if="showNumber.includes(detail?.checkId)">
					<p>{{ zgCountEnum[detail?.checkId] }}：</p>
					<p>{{ detail[zgCountData[detail?.checkId]] ?? '-' }}</p>
				</div>
				<div class="images">
					<van-image
						v-for="(image, index) in detail?.zgZp?.split('|')"
						:key="index"
						:src="image"
						@click="onPreview(detail?.zgZp?.split('|'), index)"
					/>
				</div>
			</div>
		</component>

		<van-popup
			v-model:show="visible"
			round
			position="bottom"
			:style="{ height: '30%' }"
		>
			<div class="popup-box">
				<div class="title">
					<p @click="visible = false">取消</p>
					<p>驳回原因</p>
					<p @click="onReject">确认</p>
				</div>
			</div>
			<textarea
				v-model="inputVal"
				placeholder="请输入驳回原因"
			/>
		</van-popup>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import formSlot from '@/components/formSlot'
import { dangerInfo, dangerInfoAudit } from '@/service/village'
import { useRoute, useRouter } from 'vue-router'
import { ImagePreview, Dialog, Toast } from 'vant'

const route = useRoute()
const router = useRouter()
const visible = ref(false)
const inputVal = ref('')
const detail = ref({})

const showNumber = [
	'use_electric_bicycle',
	'use_bottled_liquefied_gas'
]
const zgCountEnum = {
	use_electric_bicycle: '自行清理电动车数量(个)',
	use_bottled_liquefied_gas: '自行清理液化石油气数量',
}
const zgCountData = {
	use_electric_bicycle: 'zgDdcNum',
	use_bottled_liquefied_gas: 'zgYhsyqNum',
}
const booleanEnum = {
	0: '否',
	1: '是',
	2: '不涉及',
}
const zgEunm = {
	1: '已整改',
	0: '未整改',
}

const onPreview = (images, index) => {
	ImagePreview({
		images,
		startPosition: index,
		closeable: true
	})
}

const onReject = () => {
	if (!inputVal.value?.trim()) {
		Toast('请输入驳回理由')
		return
	}
	Dialog.confirm({
		message: '确认驳回？',
	}).then(() => {
		onAudit(1)
	})
}

const onSubmit = () => {
	Dialog.confirm({
		message: '确认通过？',
	}).then(() => {
		onAudit(0)
	})
}

const onAudit = async (status) => {
	try {
		const result = await dangerInfoAudit({
			id: route.query.id,
			status,
			fhsm: inputVal.value
		})
		if (result?.succ) {
			Dialog.alert({
				message: status === 0 ? '已通过' : '已驳回',
			}).then(() => {
				router.back()
			})
		}
	} catch (e) {
		//
	}
}

const getDetail = async () => {
	const result = await dangerInfo({
		id: route.query.id
	})
	detail.value = result?.data
}

onMounted(() => {
	getDetail()
})
</script>

<style scoped lang="less">
.todo-info {
	height: 100%;
	.popup-box {
		.title {
			display: flex;
			padding: 22px 32px;
			p {
				height: 44px;
				line-height: 44px;
				&:nth-of-type(1) {
					color: var(--time-color);
				}
				&:nth-of-type(2) {
					flex: 1;
					text-align: center;
				}
				&:nth-of-type(3) {
					background: var(--van-primary-color);
					color: #fff;
					width: 100px;
					text-align: center;
					height: 44px;
					line-height: 44px;
					border-radius: 8px;
				}
			}
		}
	}
	textarea {
		width: calc(100% - 64px);
		height: 220px;
		background: #F6F7F8;
		box-sizing: border-box;
		padding: 12px;
		font-size: 28px;
		color: var(--title-color);
		margin: 24px 32px;
		line-height: 44px;
		&::placeholder {
			color: #BEBEBE;
			line-height: 44px;
		}
	}

	h3 {
		margin: 24px 0 12px;
	}
	.data {
		background: #fff;
		display: flex;
		flex-direction: column;
		gap: 12px;
		border-radius: 12px;
		padding: 24px;
		margin: 0 24px;
		.text {
			display: flex;
			p {
				min-height: 44px;
				line-height: 44px;
				&:nth-of-type(1) {
					color: var(--content-color);
				}
				&:nth-of-type(2) {
					width: 0;
					flex: 1;
				}
			}
		}

		.images {
			display: flex;
			flex-wrap: wrap;
			.van-image {
				width: calc(calc(100% - 96px) / 5);
				aspect-ratio: 1;
				border-radius: 8px;
				margin: 24px 24px 0 0;
				overflow: hidden;
				&:nth-of-type(5n) {
					margin-right: 0;
				}
				&:nth-of-type(-n+5) {
					margin-top: 0;
				}
			}
		}
	}
}
</style>
